<div class="left-nav">
	<!-- <widget-setting [currentWidget]="widget"></widget-setting> -->
</div>
<div class="drag-btn">
	<span (click)="add('Text')">Text</span>
	<span (click)="add('Barcode')">Barcode</span>
	<span (click)="add('Qrcode')">Qrcode</span>
</div>
<div class="drag-btn">
	<label>纸张尺寸：</label>
	宽： <input type="text" [ngModel]="pageStyle.width" #myWidth (blur)="initPage('width', myWidth.value)"> mm
	高： <input type="text" [ngModel]="pageStyle.height" #myHeight (blur)="initPage('height', myHeight.value)"> mm
</div>
<div class="drag-boundary" #myBounds [ngStyle]="{'height': pageStyle.height * 6.293 + 'px'}">
	<div class="{{widget.type}}" ngDraggable [bounds]="myBounds" [inBounds]="inBounds" [outOfBounds]="myOutOfBounds"
		(endOffset)="changePosition($event,widget)" [position]="widget.position" [scaleValue]="setMaxScale(widget.type)"
		*ngFor="let widget of zplService.widgetList" (started)="clickWidget(widget)">
		<ng-container [ngSwitch]="widget.type">
			<ng-container *ngSwitchCase="'Text'">
				<div class="curchange-box" [attr.id]="widget.id" [id]="widget.id"
					[class.curchange]="widget === zplService.getCurrentWidget()"
					[ngStyle]="{'font-size': widget.customFeature.fontSize * (55.6 / pageStyle.width) + 'px', 'line-height': widget.customFeature.lineHeight}">
					<span class="custom-{{widget.type}}"
						*ngIf="widget.customFeature.showTitle">{{widget.title}}{{widget.content}}</span>
					<span class="custom-{{widget.type}}" *ngIf="!widget.customFeature.showTitle">#{{widget.title}}</span>
					<div class="drag-delete" (click)="removeWidget(widget.id)" *ngIf="widget === zplService.getCurrentWidget()">
					</div>
				</div>
			</ng-container>
			<ng-container *ngSwitchCase="'Barcode'">
				<div class="curchange-box" [attr.id]="widget.id" [id]="widget.id"
					[class.curchange]="widget === zplService.getCurrentWidget()">
					<div class="custom-{{widget.type}}">
						<img src="{{widget.content}}" alt="">
						<div>21000090012000010</div>
					</div>
					<div class="drag-delete" (click)="removeWidget(widget.id)" *ngIf="widget === zplService.getCurrentWidget()">
					</div>
				</div>
			</ng-container>
			<ng-container *ngSwitchCase="'Qrcode'">
				<div class="curchange-box" [attr.id]="widget.id" [id]="widget.id"
					[class.curchange]="widget === zplService.getCurrentWidget()">
					<div class="custom-{{widget.type}}">
						<img src="{{widget.content}}" alt="">
					</div>
					<div class="drag-delete" (click)="removeWidget(widget.id)" *ngIf="widget === zplService.getCurrentWidget()">
					</div>
				</div>
			</ng-container>
		</ng-container>
	</div>
</div>